Namespace("sketch.ui.iphone");

(function(ui) {
    var fwk = sketch.framework;

    ui.iphone.Progressbar = klass(fwk.UIElement, (function() {
        var onPropertyChanged = function(events) {
            this.invalidate();
        };
        return {
            __type__:"ui.iphone.Progressbar",
            _constructor:function() {
                this.properties.propertyChanged.bind(EventHandler(this, onPropertyChanged));

                this.properties.createProperty("progress", "Progress", 40).
                    possibleValues({'0':0, '10':10, '20':20, '30':40, '40':40, '50':50, '60':60, '70':70, '80':80, '90':90, '100':100}).useInModel().editorTemplate("#editor-dropdown");

                this.properties.createProperty("type", "Type", 'default').
                    possibleValues({'default':'Default', 'bar':'Bar'}).useInModel().editorTemplate("#editor-dropdown");
                this.properties.createProperty("min", "Min value", 0);
                this.properties.createProperty("max", "Max value", 100);

                this._fillIn =  fwk.Resources['progressbar_in'];
                this._fillOut =  fwk.Resources['progressbar_out'];
                this._fillIn_def =  fwk.Resources['progressbar_in_def'];
                this._fillOut_def =  fwk.Resources['progressbar_out_def'];
                this._stroke = '#243F63';
                this._stroke_def = '#B2B2B2';
                this.height(8);
                this.width(150);
            },
            drawSelf:function(context){
                var x = this.left(),
                    y = this.top(),
                    w = this.width(),
                    h = this.height();

                if(this.type() == 'bar'){
                    var outBrush = this._fillOut.toBrush(context, 0, y, 0, y+h);
                    var inBrush = this._fillIn.toBrush(context, 0, y, 0, y+h);
                    var progress = this.progress()/(this.max()-this.min());
                    context.roundedRect(x, y, w, h, h/2, outBrush, this._stroke);
                    context.roundedRect(x+1, y, (w-2) * progress, h, (h)/2, inBrush);
                }else{
                    var outBrush = this._fillOut_def.toBrush(context, 0, y, 0, y+h);
                    var inBrush = this._fillIn_def.toBrush(context, 0, y+1, 0, y+h-2);
                    var progress = this.progress()/(this.max()-this.min());
                    context.roundedRect(x, y, w, h, h/2, outBrush, this._stroke_def);
                    context.roundedRect(x, y, w * progress, h, (h)/2, inBrush);
                }
            },
            type:function(value){
                return this.properties.type(value);
            },
            min:function(value){
                return this.properties.min(value);
            },
            max:function(value){
                return this.properties.max(value);
            },
            progress:function(value){
                return this.properties.progress(value);
            },
            resizeDimensions:function(){
                return fwk.ResizeDimension.Horizontal;
            }
        };
    })());
})(sketch.ui);